<template>
  <div class="goodsItem">
    <div @click="isCheck(shopcarItem.lineItemId,shopcarItem.isSelected)" class="checkbox">
      <span >
        <img v-if="shopcarItem.isSelected" src="/static/images/shopcar/checkbox-active.png">
        <img v-else src="/static/images/shopcar/checkbox.png">
      </span>
    </div>
    <dl class="goodsIntro">
      <dt><img :src="shopcarItem.iconKey"></dt>
      <dd>
        <div class="goodsFi">
          <h3 class="goodsName">{{shopcarItem.productName}}</h3>
          <p v-if="shopcarItem.productTypeId != 2 " class="price">￥{{shopcarItem.sellPrice}}</p>
          <p v-if="shopcarItem.productTypeId == 2 && proIntegralFalse == true" class="price">￥{{shopcarItem.sellPrice}}</p>
          <p v-if="shopcarItem.productTypeId == 2 && proIntegralFalse == false" class="price">￥{{shopcarItem.showPrice}}</p>
        </div>
        <div class="goodsTw">
          <h3 class="standard">颜色：{{shopcarItem.colorName}}</h3>
          <h3 class="standard1">规格：{{shopcarItem.formatName}}</h3>
        </div>
        <div class="goodsTh">
          <p> 
          <handel-amount 
          :max="virtualStockNum" 
          :quantityNum="shopcarItem.quantity"
          @add="_addQuantity()"
          @decrease="_decreaseQuantity()"
          >
          </handel-amount>
          <p>
          <div class="deleate">
            <div @click="deleate(shopcarItem.lineItemId)"><img src="/static/images/shopcar/deleate.png"></div>
          </div>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
  import handelAmount from './handel-amount.vue'
  import {mapGetters} from 'vuex'
  export default {
    components:{
      handelAmount
    },
    data () {
      return {
        virtualStock: '',//虚拟库存
        proIntegralFalse:"",
      }
    }, 
    props: {
      shopcarItem: {
        type: Object,
        required: true
      },
    },
    computed:{
      virtualStockNum(){
        return this.virtualStock
      }
    },
    onLoad(){
      this.virtualStock = wx.getStorageSync('virtualStock')
      
      this.proIntegralFalse = wx.getStorageSync('proIntegralFalse')
    },
    methods: {
      _addQuantity () { //加数量
        this._computedNumber(1,1)
      },
      _decreaseQuantity () {//减数量
        this._computedNumber(0,-1)
      },
      _computedNumber(type,num){
        let sendGoBuyProduct = {
          productId: this.shopcarItem.productId,
          formatId: this.shopcarItem.formatId,
          colorId: this.shopcarItem.colorId,
          quantity: num
        }
        this.$http.post('cart/product/addOrUpdate',sendGoBuyProduct,"application/json",false).then((data)=>{ 
          console.log('购物车的返回数据',data)
          if (type === 1) {
            this.$store.dispatch('addLineItemQuantity', data.data.data)
          }else{
            this.$store.dispatch('decreaseLineItemQuantity', data.data.data)
          }
        })
      },
      isCheck(lineItemId,isSelected) { //是否选择了选择框
        if(!isSelected){
          this.$store.dispatch("checkSingleProduct",lineItemId)
        }else{
          this.$store.dispatch("checkSingleProductDelete",lineItemId)
        }
      }, 
      deleate(id) { //删除按钮
        //首先要传当前的商品id给后台，返回删除成功以后，我这边去循环vuex的id，找到对应的商品去删除
        this.$http.post('cart/',{lineItemId:id},'',false).then((data)=>{ 
          this.$store.dispatch("deleteCurrentProduct",id)
        })
      }
    }
  }
</script>

<style scoped>
.goodsItem { 
  display: flex;
  border-top: 1rpx solid #efeff4;
  padding: 40rpx 24rpx;
  background: #fff;
}
.goodsItem .checkbox {
  width: 44rpx;
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}
.goodsItem .checkbox span{
  display: block;
  width: 44rpx;
  height: 44rpx;
}
.goodsItem .checkbox img{
  width: 100%;
  height: 100%;
}
.goodsItem .goodsIntro{
  flex: 1;
  display: flex;
}
.goodsItem .goodsIntro dt{
  width: 177rpx;
  height: 177rpx;
  margin-right: 28rpx;
}
.goodsItem .goodsIntro dt img{
  width: 100%;
  height: 100%;
}
.goodsItem .goodsIntro dd{
  overflow: hidden;
  position: relative;
  flex: 1;
}
.goodsItem .goodsIntro dd .goodsFi{
  display: flex;
}
.goodsItem .goodsIntro dd .goodsFi .goodsName{
  flex: 1;
  font-size: 26rpx;
  color: #2a2a2a;
  line-height: 36rpx;
  font-weight: 600;
  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
}
.goodsItem .goodsIntro dd .goodsFi .price{
  font-size: 30rpx;
  color: #e38a8a;
  font-weight: 600; 
}
.goodsItem .goodsIntro dd .goodsTw{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #9e9e9e;
}
.standard1{
  margin-left:20rpx;
}
.goodsItem .goodsIntro dd .goodsTh{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  font-size: 24rpx;
  color: #9e9e9e;
}
/* .goodsItem .goodsIntro dd .goodsTh .numberDiv{
  
} */
.goodsItem .goodsIntro dd .goodsTh .numberDiv div{
  display: flex; 
  border:　1rpx solid #d9d7d7;
  width: 170rpx;
  height: 50rpx;
  justify-content: space-around;
}
.goodsItem .goodsIntro dd .goodsTh .numberDiv span{
  font-size: 40rpx;
  color: #e38a8a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goodsItem .goodsIntro dd .goodsTh .numberDiv span:first-child{
  color: #9e9e9e;
}
.goodsItem .goodsIntro dd .goodsTh .numberDiv input{
  font-size: 30rpx;
  color: #e38a8a;
  width: 56rpx;
  border-left: 1rpx solid #d9d7d7;
  border-right: 1rpx solid #d9d7d7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goodsItem .goodsIntro dd .goodsTh .deleate{
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.goodsItem .goodsIntro dd .goodsTh .deleate div{
  width: 40rpx;
  height: 44rpx;
}
.goodsItem .goodsIntro dd .goodsTh .deleate img{
  width: 100%;
  height: 100%;
}
</style>